<template>
  <div>
    <!-- <h3>这是主页</h3>   -->
    <div class="fenbu">
      <div ref="barElement" style="width: 600px;height:400px;"></div>
      <div ref="barElement2" style="width: 600px;height:400px;"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  mounted() {
    this.$nextTick(() => {
      let barElement = this.$refs.barElement;
      console.log(barElement);
      if (barElement) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(barElement);
        // 绘制图表
        myChart.setOption({
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          xAxis: {
            data: ['工作生活', '技能学习', '兴趣爱好']
          },
          yAxis: {},
          series: [
            {
              name: '数量',
              type: 'bar',
              data: [5, 20, 36]
            }
          ]
        });
        let barElement2 = this.$refs.barElement2;
        if (barElement2) {
          var myChart2 = echarts.init(barElement2);
          myChart2.setOption({
            series: [
              {
                type: 'pie',
                data: [
                  {
                    value: 335,
                    name: '男生'
                  },
                  {
                    value: 234,
                    name: '女生'
                  },
                  {
                    value: 1548,
                    name: '未知性别'
                  }
                ],
                radius: '50%'
              }
            ]
          });
        }

      }

    })

  }
}

</script>

<style scoped>
.fenbu {
  display: flex;
}
</style>